<template>
    <div class="platform">
        <div class="platform-box">
            <el-form ref="formRef" :model="form" label-position="left" label-width="auto"
                class="demo-ruleForm platform-formList">
                <div class="form-left-six" style="border-right:none">
                    <div class="img-preview">
                        <div class="back">
                            <div class="back-btn" @click="goBack">返回</div>
                            <div class="title">产品展示</div>
                        </div>
                        <div class="jd-carousel">
                            <div class="carousel-wrapper">
                                <div class="main-image">
                                    <el-image :src="currentBigImage" fit="cover" />
                                </div>
                                <div class="thumbnail-list">
                                    <div>
                                        <!-- <el-icon class="arrow-left" v-show="showLeftArrow"
                                            @click="scrollThumbnails('left')">
                                            <ArrowLeftBold />
                                        </el-icon> -->
                                    </div>
                                    <div class="thumbnails" ref="thumbnails">
                                        <div class="thumbnail" v-for="(img, index) in thumbnailImages" :key="index"
                                            @click="changeBigImage(index)">
                                            <el-image :class="currentBigImage === img ? 'active' : ''" :src="img"
                                                fit="cover" @click="clickImg(index)" />
                                        </div>
                                    </div>
                                    <div>
                                        <!-- <el-icon class="arrow-right" v-show="showRightArrow"
                                            @click="scrollThumbnails('right')">
                                            <ArrowRightBold />
                                        </el-icon> -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-right-four" style="border-left: 1px solid #dcdce1;padding-left: 2%;">
                    <div class="mgt">
                        <div class="four-header-img">
                            <div class="user-info">
                                <image-preview :src="materialInfo.profilePictureImg" :width="50" :height="50"
                                    style="border-radius:50%"></image-preview>
                                <div class="name">{{ materialInfo.materialSupplierName }}</div>
                            </div>
                            <div class="view">{{ form.likes }}点赞｜{{ form.visits }}浏览</div>
                            <!-- <div class="view">
                                <div class="thumbs">
                                    <div> <i class="iconfont icon-thumb"></i></div>
                                    <div class="view-content">99+</div>
                                </div>
                                <div class="thumbs share">
                                    <div><i class="iconfont icon-share"></i></div>
                                    <div class="view-content share-content">分享</div>
                                </div>
                            </div> -->
                        </div>
                        <div class="four-title">材料名称：{{ form.materialName }}</div>
                        <div class="four-detail">
                            <div class="detail-des"><span class="space-title"><span
                                        style="font-weight:700;">材料简述：</span></span>{{ form.materialBriefly || '暂无材料简述' }}
                            </div>
                        </div>
                        <div class="four-detail">
                            <div class="detail"><span class="space-title"><span
                                        style="font-weight:700;">材料描述：</span></span>{{ form.materialDesc || '暂无材料描述' }}
                            </div>
                        </div>
                        <div class="four-content">
                            <el-descriptions class="margin-top" title="详细参数" :column="1" size="small" border>
                                <el-descriptions-item label="名称">描述</el-descriptions-item>
                                <el-descriptions-item v-for="(v, i) in resumeList" :key="i" :label="v.ParamsName">{{
                                    v.description }} </el-descriptions-item>
                            </el-descriptions>
                        </div>
                        <!-- <div class="toolTip">{{ form.likes }}点赞｜{{ form.visits }}浏览</div> -->
                    </div>
                </div>
            </el-form>
            <div class="platform-submit-btn">
            </div>
        </div>

    </div>
</template>
<script setup>
import { getImgUrl } from '@/api/decor/designer.js'
import { getPlatformMaterialDetail, getMaterialAuthentication } from '@/api/decor/materialSupplier.js'
import { computed } from 'vue';
const thumbnailImages = ref([])
const currentBigIndex = ref(0)
const showLeftArrow = ref(false)
const showRightArrow = ref(true)
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const materialInfo = ref({})
//详细参数
const resumeList = ref()
const data = reactive({
    form: {}
});
// 获取详情
(() => {
    const materialId = route.params.materialId
    if (materialId) {
        getPlatformMaterialDetail(materialId).then((res) => {
            form.value = res.data
            resumeList.value = JSON.parse(res.data.materialParams)
            let _temp = []
            let imgUrlPromises = [];
            if (res.data.materialShowcase) {
                let materialShowcasePromise = getImgUrl(res.data.materialShowcase).then((res) => {
                    _temp = res.data;
                });
                imgUrlPromises.push(materialShowcasePromise);
            }
            Promise.all(imgUrlPromises).then(() => {
                let urls = []
                _temp.forEach((v) => {
                    urls.push(v.url)
                })
                thumbnailImages.value = urls
            });
        })
    }
})();
// 获取材料商详细信息
const getUserInfo = () => {
    getMaterialAuthentication().then((res) => {
        let materialData = res;
        materialData.profilePictureImg = '';
        let imgUrlPromises = [];
        // 获取形象照的异步操作
        if (materialData.avatar) {
            let avatarPromise = getImgUrl(materialData.avatar).then((res) => {
                materialData.profilePictureImg = res.data[0].url;
            });
            imgUrlPromises.push(avatarPromise);
        }
        Promise.all(imgUrlPromises).then(() => {
            materialInfo.value = materialData;
        });
    })
}
const currentBigImage = computed(() => {
    return thumbnailImages.value[currentBigIndex.value];
});
const changeBigImage = (index) => {
    currentBigIndex.value = index;
    updateArrowVisibility();
}
// 点击小图片
const clickImg = (index) => {
    const thumbnailsContainer = proxy.$refs.thumbnails;
    const containerWidth = thumbnailsContainer.offsetWidth;
    const thumbnailWidth = thumbnailsContainer.querySelector('.thumbnail').offsetWidth + 4;
    const maxRemoveScroll = thumbnailsContainer.scrollWidth - containerWidth;
    // 当前点击图片距离左侧的距离
    const leftWidth = 64 * index
    if (leftWidth + 40 >= containerWidth) {
        thumbnailsContainer.scrollLeft += thumbnailWidth;
    } else {
        thumbnailsContainer.scrollLeft -= thumbnailWidth;
    }
}
const scrollThumbnails = (direction) => {
    const thumbnailsContainer = proxy.$refs.thumbnails;
    if (thumbnailsContainer) {
        const containerWidth = thumbnailsContainer.offsetWidth;
        const thumbnailWidth = thumbnailsContainer.querySelector('.thumbnail').offsetWidth + 4;
        const maxScroll = thumbnailsContainer.scrollWidth - containerWidth;
        if (direction === 'left') {
            thumbnailsContainer.scrollLeft -= thumbnailWidth;
        } else {
            thumbnailsContainer.scrollLeft += thumbnailWidth;
        }
        updateArrowVisibility();
    }
}
const updateArrowVisibility = () => {
    const thumbnailsContainer = proxy.$refs.thumbnails;
    if (thumbnailsContainer) {
        showLeftArrow.value = thumbnailsContainer.scrollLeft >= 0;
        showRightArrow.value = thumbnailsContainer.scrollLeft < (thumbnailsContainer.scrollWidth - thumbnailsContainer.offsetWidth);
    }
}
const { form } = toRefs(data);
// 返回按钮
const goBack = () => {
    router.go(-1)
}
getUserInfo()
</script>
<style lang="scss" scoped>
.demonstration {
    color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>